<template>
  <!--执行页-案件批注-添加备注-组件 -->
  <section class="component add-case-remark">
    <el-form ref="form" :rules="rules" label-width="100px" :model="applyModel">
      <el-form-item label="批注内容" prop="content">
        <el-input
          type="textarea"
          v-model="applyModel.content"
          :maxlength="200"
          show-word-limit
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="confirm-button">
      <el-button @click="close">取消</el-button>
      <el-button @click="commit">确定</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { Emit } from "vue-property-decorator";
import { State, namespace } from "vuex-class";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import FileUpload from "~/components/common/file-upload.vue";

const CollectionExecutionModule = namespace("collection-execution");
@Component({
  components: {
    FileUpload
  }
})
export default class AddCaseRemark extends Vue {
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  private rules: any = {
    content: [{ required: true, message: "请输入备注内容" }]
  };
  private applyModel: any = {
    content: ""
  };

  @CollectionExecutionModule.State private caseId;

  @Emit("close")
  private close() {
    const form: any = this.$refs["form"];
    form.resetFields();
  }

  private commit() {
    const form: any = this.$refs["form"];
    form.validate(result => {
      if (!result) return;
      this.caseOperatorPageService
        .addCaseRemark({
          caseId: this.caseId,
          content: this.applyModel.content
        })
        .subscribe(data => {
          this.$message.success("添加备注成功");
          this.close();
        });
    });
  }
}
</script>

<style scoped lang="less"></style>
